<template>
  <el-menu
    default-active="home"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    :collapse="isCollapse"
  >

    <el-menu-item @click="chlickMenu(item)" v-for="item in noChildren" :key="item.name" :index="item.name">
      <i :class="`el-icon-${item.icon}`"></i>
      <span slot="title">{{item.label}}</span>
    </el-menu-item>



    <el-submenu v-for="item in hasChildren" :key="item.label" :index="item.label">
      <template slot="title">
        <i :class="`el-icon-${item.icon}`"></i>
        <span slot="title">{{item.label}}</span>
      </template>
      <el-menu-item-group   v-for="subItem in item.children" :key="subItem.name">
        <el-menu-item  @click="chlickMenu(subItem)"  :index="subItem.name">{{subItem.label}}</el-menu-item>
      </el-menu-item-group>
    </el-submenu>




  </el-menu>
</template>


<style scoped>
.el-menu{
    height: 100vh;
}

</style>

<script>
export default {
  setup() {},
  data(){
    return {
      // isCollapse: false,
        menuData: [
                {
                    path: "/",
                    name: "home",
                    label: "首页",
                    icon: "s-home",
                    url: "Home/Home"
                },
                {
                    path: "/mall",
                    name: "mall",
                    label: "商品管理",
                    icon: "video-play",
                    url: "MallManage/MallManage"
                },
                {
                    path: "/user",
                    name: "user",
                    label: "用户管理",
                    icon: "user",
                    url: "UserManage/UserManage"
                },
                {
                    label: "其他",
                    icon: "location",
                    children: [
                        {
                            path: "/page1",
                            name: "page1",
                            label: "页面1",
                            icon: "setting",
                            url: "Other/PageOne",
                        },
                        {
                            path: "/page2",
                            name: "page2",
                            label: "页面2",
                            icon: "setting",
                            url: "Other/PageTwo",
                        },
                    ]
                },
            ]

    }
  },
  computed:{
    // 没有子菜单的
    noChildren(){
      // console.log(this.menuData.filter(item=>!item.children));
        return this.menuData.filter(item=>!item.children)
    },
    // 有子菜单
    hasChildren(){
        // console.log(this.menuData.filter(item => item.children));
       return  this.menuData.filter(item => item.children)
    },
    // 在仓库中获取的方法
    isCollapse(){
     return  this.$store.state.tab.isCollapse
    }
  },
  methods:{
     handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      chlickMenu(item){
        // console.log(item.path);
        if(this.$route.path !==item.path && !(this.$route.path === '/home' && (item.path ==='/')) ){
          console.log(item.path);
        this.$router.push(item.path)
        }
        this.$store.commit('selectMenu',item)

      }
  },

};
</script>
